<template>
  <div>
     <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 30,50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :url="url">
     </el-pagination>
  </div>
</template>
<script>
import { getWorkData } from '@/utils/table.js'
export default{
  name:'Pagination',
  props:{
    total:{
      type:Number,
      default:0
    },
    url:{
      type:String,
      default:''
    }
  },
  data(){
    return{
      currentPage:1,  // 当前页数 
      pageSize:10,  // 每页条数
    }
  },
  created(){
     //getWorkData(this.$parent,'/works',{page:this.currentPage,size:this.pageSize},['completed'])
     this.getWorkDataAndPage()
  },
  methods:{
     // 改变每页显示几条  这里的分页是后端的分页方式  后端分页方式 在 handleSizeChange handleCurrentChange 执行时  都加 刷新表格数据的方法
     // 前端分页方式  在 handleSizeChange handleCurrentChange 执行时 不需要加 刷新表格数据的方法  
     // 前端分页 后端分页 handleSizeChange handleCurrentChange 除了 刷新表格的方法 其他都一样  后端加刷新表格 方法  前端加 计算属性
     // 但是需要一个计算属性处理表格数据 return this.tableData.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize) 执行这个
     // :data="计算属性的名字"
     // 前端方式的分页 和后端方式的分页完全不同
     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.currentPage = 1;
        //getWorkData(this.$parent,'/works',{page:this.currentPage,size:val},['completed'])
        this.getWorkDataAndPage()
     },
     // 改变页数 第几页
     handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
        //getWorkData(this.$parent,'/works',{page:val,size:this.pageSize},['completed'])
        this.getWorkDataAndPage()
     },
     getWorkDataAndPage(){
        getWorkData(this.$parent,'/works',{page:this.currentPage,size:this.pageSize},['completed'])
     }
  }
}
</script>

<style lang="scss" scoped>
.el-pagination{
    margin-top:20px;
  }

</style>